<template>
    <v-navigation-drawer :order="props.order" :absolute="props.absolute" :touchless="props.touchless"
        :scrim="props.scrim" class="my-drawer !top-[0] !h-[100%]" v-model="drawer" :mobile="props.mobile"
        :location="props.location" :width="props.width" temporary :class="{
            '!left-[0]': props.location === 'left'
        }">
        <div class="my-drawer-card h-[100%]">
            <slot name="content">

                <!-- 顶部 -->
                <v-toolbar class="!h-[60px] bg-table-header-bg">
                    <v-toolbar-title class="!text-[16px] !font-[700] !ml-3">
                        <div class="flex align-center">
                            <!-- 标题前 -->
                            <slot name="title-prepend">

                            </slot>
                            <div class="pl-2"></div>
                            <!-- 标题 -->
                            <slot name="title">
                                {{ $t(props.title) }}
                            </slot>
                        </div>
                    </v-toolbar-title>
                    <v-spacer></v-spacer>
                    <div class="flex align-center">
                        <!-- 其余按钮 -->
                        <slot name="title-right">

                        </slot>
                        <div class="pl-1"></div>
                        <!-- 关闭按钮 -->
                        <v-btn class="!w-[32px] !h-[32px] !min-h-[auto] !min-w-[auto] mr-3" @click="handleCloseClick">
                            <svg-icon iconClass="close" size="20"></svg-icon>
                        </v-btn>
                    </div>
                </v-toolbar>
                <!-- 中部 -->
                <div class="scroll_content_y" :style="{
                    height: 'calc(100% - 60px - ' + (props.isShowBottom ? 60 : 0) + 'px)'
                }">
                    <mrc_ess_SkeletonLoader v-show="loading" :loading="loading" type="article, article, article"
                        class="pa-6"></mrc_ess_SkeletonLoader>
                    <div v-show="!loading" class="h-full" :class="{
                        'pointer-events-none': loading || btnLoading
                    }">
                        <slot name="default">
                            <!-- 内容 -->
                        </slot>
                    </div>
                </div>
                <!-- 底部 -->
                <div class="flex align-center justify-center bg-table-header-bg"
                    :style="{ height: props.bottomHeight + 'px' }" v-if="props.isShowBottom">
                    <!-- 取消 -->
                    <v-btn :disabled="btnDisabled" color="secondary" variant="text" class="ml-3 mr-3 !normal-case"
                        @click="handleCancel">{{
                            $t(props.cancelText) }}</v-btn>
                    <!-- 确认 -->
                    <v-btn :disabled="btnDisabled" color="secondary" class="ml-3 mr-3 !normal-case"
                        @click="handleConfirm" :loading="btnLoading">{{
                            $t(props.confirmText) }}</v-btn>
                </div>

            </slot>
        </div>
    </v-navigation-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
const emit = defineEmits(['confirm', 'cancel', 'close', 'open', 'loading', 'btnLoading'])
const props = defineProps({
    absolute: {
        type: Boolean,
        default: false
    },
    location: {
        type: String,
        default: "right"
    },
    title: {
        type: String,
        default: "label_title"
    },
    width: {
        type: [String, Number],
        default: "600"
    },
    cancelText: {
        type: String,
        default: "btn_cancel"
    },
    confirmText: {
        type: String,
        default: "btn_confirm"
    },
    autoClose: {
        type: Boolean,
        default: true
    },
    autoCancel: {
        type: Boolean,
        default: true
    },
    bottomHeight: {
        type: [Number, String],
        default: "56"
    },
    isShowBottom: {
        type: Boolean,
        default: true
    },
    mobile: {
        type: Boolean,
        default: true
    },
    teleport: {
        type: String,
        default: "body"
    },
    touchless: {
        type: Boolean,
        default: true
    },
    scrim: {
        type: [Boolean, String],
        default: "white"
    },
    order: {
        type: [Number, String]
    },
    alwaysUse: {
        type: Boolean,
        default: false
    }
})
// 按钮是否禁用
const btnDisabled = ref(false);
/**
 * 修改按钮不可用状态
 */
function triggerBtnDisabled(flag: boolean) {
    btnDisabled.value = flag;
}
// 是否显示抽屉
const drawer = ref(false);
watch(drawer, (val: boolean) => {
    if (val == true) {
        emit("open");
    } else {
        emit("close");
        btnLoading.value = false;
        loading.value = false;
        btnDisabled.value = false;
    }
})
/**
 * 取消
 */
function handleCancel(event: PointerEvent) {
    if (props.autoCancel == true) {
        drawer.value = false;
    }
    emit("cancel", {
        showLoading,
        hideLoading,
        showBtnLoading,
        hideBtnLoading,
        close,
        open,
        event: event
    });
}
/**
 * 确认
 */
function handleConfirm(event: PointerEvent) {
    if (props.autoClose == true) {
        drawer.value = false;
    }
    emit('confirm', {
        showLoading,
        hideLoading,
        showBtnLoading,
        hideBtnLoading,
        close,
        open,
        event: event
    });
}
/**
 * 关闭
 */
function handleCloseClick(event: PointerEvent) {
    drawer.value = false;
}
// 打开抽屉
function open() {
    // 已经打开状态
    if (drawer.value == true) {
        if (props.alwaysUse == false) {
            close();
            setTimeout(() => {
                drawer.value = true;
            }, 200)
        } else {
            drawer.value = true;
        }
    } else {
        drawer.value = true;
    }
}
// 关闭抽屉
function close() {
    drawer.value = false;
}
// 是否显示loading
const loading = ref(false);
// 是否显示按钮loading
const btnLoading = ref(false);
/**
 * 展示loading
 */
function showLoading() {
    loading.value = true;
    emit("loading", true);
    btnDisabled.value = true;
}
/**
 * 关闭loading
 */
function hideLoading() {
    loading.value = false;
    emit("loading", false);
    btnDisabled.value = false;
}
/**
 * 确认按钮展示loading
 */
function showBtnLoading() {
    btnLoading.value = true;
    emit("btnLoading", true);
    btnDisabled.value = true;
}
/**
 * 确认按钮取消loading
 */
function hideBtnLoading() {
    btnLoading.value = false;
    emit("btnLoading", false);
    btnDisabled.value = false;
}
defineExpose({
    close,
    open,
    showLoading,
    hideLoading,
    showBtnLoading,
    hideBtnLoading,
    triggerBtnDisabled,
    drawer
})
</script>

<style scoped>
.my-drawer-card :deep(.v-toolbar__content) {
    height: 60px !important;
}
</style>
